import './styles/tailwind.css';
import './styles/index.less';
import { createApp } from 'vue';
import { setupNaiveDiscreteApi, setupNaive, setupDirectives } from '@/plugins';
import App from './App.vue';
import router, { setupRouter } from './router';
import { setupStore } from '@/store';

// 导入高德地图相关组件
import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

// 初始化高德地图API
initAMapApiLoader({
  key: '9d5096921b181cfceb45a84966116430',
  securityJsCode: 'c40297acf7138ca1057ad138012dd4c1', // 新版key需要配合安全密钥使用
  // Loca:{
  //   version: '2.0.0'
  // } // 如果需要使用loca组件库，需要加载Loca
});

async function bootstrap() {
  const app = createApp(App);

  // 挂载状态管理
  setupStore(app);

  // 注册全局常用的 naive-ui 组件
  setupNaive(app);

  // 挂载 naive-ui 脱离上下文的 Api
  setupNaiveDiscreteApi();

  // 注册全局自定义指令，如：v-permission权限指令
  setupDirectives(app);

  // 注册高德地图组件
  app.use(VueAMap);

  // 挂载路由
  setupRouter(app);

  // 路由准备就绪后挂载 APP 实例
  await router.isReady();

  // https://www.naiveui.com/en-US/os-theme/docs/style-conflict#About-Tailwind's-Preflight-Style-Override
  const meta = document.createElement('meta');
  meta.name = 'naive-ui-style';
  document.head.appendChild(meta);

  app.mount('#app', true);
}

void bootstrap();
